<template>
  <div class="footer">
    已完成{{ isComplete }} / 全部{{ list.length }}
    <button v-if="isComplete > 0" @click="clear">清除已完成</button>
  </div>
</template>
<script>
import { defineComponent, computed } from "vue";
export default defineComponent({
  name: "navFooter",
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
  components: {},
  setup(props, ctx) {
    let isComplete = computed(() => {
      // 过滤已完成的任务
      let arr = props.list.filter((item) => {
        return item.complete;
      });
      return arr.length;
    });
    // 清除任务
    let clear = () => {
      // 过滤未完成的
      let newList = props.list.filter((item) => {
        return item.complete == false;
      });
      // 传值给父组件
      ctx.emit("clear", newList);
    };
    return {
      isComplete,
      clear,
    };
  },
});
</script>
<style lang="scss" scoped>
.footer {
  display: flex;
  width: 200px;
  justify-content: space-between;
}
</style>
